<template>
  <div>
      <ul>
          <li v-for="item in shoplists" :key="item.id">
              <div class="img"><img :src="item.src" alt=""></div>
              <div class="introduce">
                  <div>{{item.title}}</div>
                  <div>￥{{item.price}}</div>
                  <button @click="add(item)">加入购物车</button>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name:'',
    // computed:{
    //     shoplists(){
    //         return this.$store.state.shoplists
    //     }
    // }
    computed:mapState(['shoplists']),
    methods:{
        add(item){
            // this.$store.commit('add',item)
            this.$store.dispatch('add',item)
        }
    }
}
</script>

<style scoped>
    ul,li{
        margin: 0;
        padding: 0;
    }
    li{
        padding: 10px;
        display: flex;
        column-gap: 5%;
        border-bottom: 1px dashed #ccc;
    }
    .img{
        width: 40%;
        border: 1px solid #ccc;
    }
    img{
        max-width: 100%;
    }
    .introduce{
        width: 55%;
        display: flex;
        flex-direction: column;
        align-items: left;
        align-self: flex-end;
    }
    .introduce>div:nth-child(1){
        height: 40px;
        font-size: 18px;
        width: 50%;
        text-align: left;
        line-height: 40px;
    }
    .introduce>div:nth-child(2){
        height: 40px;
        font-size: 18px;
        color: #f00;
        width: 50%;
        text-align: left;
        line-height: 40px;

    }
    button{
        background: coral;
        outline: none;
        border: none;
        width: 100px;
        height: 35px;
        color: white;
    }
</style>